<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>账号信息修改</title>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/font-awesome.min.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/common.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/usercenter.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/footer.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/bootstrap.min.css') }}>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <script src={{ url_for('static', filename = 'js/alert.js') }}></script>
    <script src={{ url_for('static', filename = 'js/echarts.js') }}></script>


    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href='../static/css/font-awesome.min.css'>
    <link rel="stylesheet" type="text/css" href='../static/css/common.css'>
    <link rel="stylesheet" type="text/css" href='../static/css/usercenter.css'>
    <link rel="stylesheet" type="text/css" href='../static/css/footer.css'>
    <link rel="stylesheet" type="text/css" href='../static/css/bootstrap.min.css'>
    <script src={{ url_for('static', filename = 'js/alert.js') }}></script>
    <script src={{ url_for('static', filename = 'js/echarts.js') }}></script>




</head>
<body>
<html>

<head>
        <style>
        html{
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #container2 {
            width: 750px;
            height: 320px;
        }
    </style>
</head>

<body>
<div class="container">


    <div class="row">

        <div class="col-xs-2 left">

            <h4>个人中心</h4>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#userinfo" aria-controls="userinfo"           role="tab"    data-toggle="tab">个人信息</a></li>
                <li role="presentation" class="left"> <a href="#xiugai" aria-controls="xiugai"                role="tab"    data-toggle="tab">修改信息</a></li>
                <li role="presentation" class="left"> <a href="#wodeshoucang" aria-controls="wodeshoucang"    role="tab"    data-toggle="tab">我的收藏</a></li>
                <li role="presentation" class="left"> <a href="#gouwuche" aria-controls="gouwuche"            role="tab"    data-toggle="tab">购物车</a></li>
                <li role="presentation" class="left"> <a href="#wodedingdan" aria-controls="wodedingdan"      role="tab"    data-toggle="tab">我的订单</a></li>
                <li role="presentation" class="left"> <a href="#liulan" aria-controls="liulan"                role="tab"    data-toggle="tab">浏览历史</a></li>
                <li role="presentation" class="left"> <a href="#dianxan" aria-controls="dianxan"              role="tab"    data-toggle="tab">我的点赞</a></li>
                <li role="presentation" class="left"> <a href="#wode" aria-controls="wode"                    role="tab"    data-toggle="tab">我的我的</a></li>
                <li role="presentation" class="left"> <a href="#home" aria-controls="home"                    role="tab"    data-toggle="tab">修改信息</a></li>
                <li role="presentation" class="left"> <a href="#profile" aria-controls="profile"              role="tab"    data-toggle="tab">修改信息</a></li>
              </ul>

        </div>



        <div class="col-xs-10">  

        
        
        <!-- Tab panes -->
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active fade" id="userinfo">
                    <div class="self">

                            <!-- 头像 -->
                        <div class="row jumbotron" style="margin:40px 10px 0 10px; ">
                            <div class="col-xs-3"><img src="{{url_for('static', filename=user.pimg) }}" width="100px" height="100px"></div>
                            <div class="col-xs-3">
                                <h4>用户名：</h4>
                                <h4 style="color:rgb(199, 215, 198) ;font: 2em sans-serif;" >{{ user.user_name }}</h4>
                                
                            </div>
                            
                            <div class="col-xs-3"></div>
                            <div class="col-xs-2" style="color:rgb(212, 38, 160);font: 1.6em sans-serif;"><a href="{{ url_for('usercenter.zhuxiao') }}">注销</a></div>
                        </div>
                        <br/>
                        <!-- 电话以及邮箱 -->
                        <div class="jumbotron">
                            <div style="color:rgb(19, 170, 190);font: 1.6em sans-serif;">电话：{{user.phone}}</div>
                            <br/>
                            <div style="color:rgb(19, 170, 190);font: 1.6em sans-serif;">邮箱：{{user.email}}</div>
                        </div>

                    </div>
            </div> 
            
            






            <div role="tabpanel" class="tab-pane fade" id="xiugai">
                

                <form method="POST" role="form"  method="POST" enctype="multipart/form-data" >

                    {{ form.csrf_token }}

                    <div class="col-sm-12 self">
                        <div class="jumbotron" style="margin:20px 10px 0 10px; ">
                            <img src="{{ url_for('static',filename=user.pimg)}}" style="height:100px;width:100px" class="img-circle">
                            <br />
                            <br />
                            <div style="color:rgb(19, 170, 190);font: 1.6em sans-serif;">用户名：{{ user.user_name }}</div>
                        </div>

                        <br />

                        


                        <div class = 'form-group'>
                            <label for="exampleInputEmail1">密码</label>
                            {{ form.pwd(type="password" ,class="form-control", id="exampleInputPassword1" ,placeholder="密码") }}
                        </div>


                        <div class='form-group'>
                            <label for="exampleInputEmail1">确认密码</label>
                            {{ form.pwd2(type="password" ,class="form-control", id="exampleInputPassword1" ,placeholder="确认密码") }}
                        </div>


                        <div class="form-group">
                            <label for="exampleInputEmail1">邮箱地址</label>
                            {{ form.mail(type="text" ,id="content",value="123456@qq.com") }}
                        </div>


                        <div class="form-group">
                            <label for="exampleInputFile">头像修改</label>
                            {{ form.image(accept=".jpg") }}
                         </div>


                    </div>

                    {{ form.submit(class="form-control btn btn-success", style="transition: all 0.6s;" ) }}

                    <p> </p>

                    <button type="reset" class="form-control btn btn-success" style="transition: all 0.6s;" >清 空</button>

                </form>

            </div>





            <div role="tabpanel" class="tab-pane fade" id="wodeshoucang">我的收藏</div>
            <div role="tabpanel" class="tab-pane fade" id="gouwuche">购物车</div>
            <div role="tabpanel" class="tab-pane fade" id="wodedingdan">我的订单</div>
            <div role="tabpanel" class="tab-pane fade" id="liulan">浏览历史</div>
            <div role="tabpanel" class="tab-pane fade" id="dianxan">
                <div id="main" style="width: 600px;height:400px;"></div>
                    <script type="text/javascript">
                        // 基于准备好的 dom，初始化 echarts 实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '最近发布内容点击量'
                            },
                            tooltip: {},
                            legend: {
                                data: ['日期']
                            },
                            xAxis: {
                                data: ['文章1', '文章2', '文章3', '文章4', '文章5']
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '点击量',
                                    type: 'line',
                                    data: [{{click1}}, {{ click2 }}, {{ click3 }}, {{ click4 }}, {{ click5 }}]
                                }]
                        }
                        myChart.setOption(option);
                        </script>

            </div>
            <div role="tabpanel" class="tab-pane fade" id="wode">我的我的</div>
            </div>
        </div> 
    </div>
</div>
</body>
</html>